<template>
    <v-app>
        <v-content>
            <v-chip class="ma-2" color="primary">Longitude:{{longitude}}</v-chip>
            <v-chip class="ma-2" color="primary">Latitude:{{latitude}}</v-chip>
            <v-chip class="ma-2" color="primary">Connection Type: {{connection}}</v-chip>
            <v-btn class="mma-2" color="primary" @click="createFile">WriteAndDownloadFile</v-btn>
            <p>{{msg}}</p>
        </v-content>
    </v-app>
</template>

<script>
  /* eslint-disable no-undef */
  import  request from 'axios';


  export default {
    name: 'App',

    components: {},

    data: () => ({
      latitude: '',
      longitude: '',
      connection: '',
      msg: '未开始下载'
      //
    }),

    mounted() {
      document.addEventListener('deviceready', this.onDeviceReady, false);
      document.addEventListener('pause', this.onPause, false);
      document.addEventListener('resume', this.onResume, false);
    },
    methods: {
      onDeviceReady() {
        const onSuccess = (position) => {
          this.latitude = position.coords.latitude;
          this.longitude = position.coords.longitude;
        };

        function onError(error) {
          alert('code: ' + error.code + '\n' +
              'message: ' + error.message + '\n');
        }

        navigator.geolocation.getCurrentPosition(onSuccess, onError, {
          enableHighAccuracy: true,
          timeout: 3000,
        });
        this.checkConnection();
        document.addEventListener('offline', this.checkConnection, false);
        document.addEventListener('online', this.checkConnection, false);
        // window.downloader.init({folder: "cvia", unzip: true});
      },
      onPause() {
      },
      onResume() {
      },
      checkConnection() {
        const networkState = navigator.connection.type;

        const states = {};
        states[Connection.UNKNOWN] = 'Unknown connection';
        states[Connection.ETHERNET] = 'Ethernet connection';
        states[Connection.WIFI] = 'WiFi connection';
        states[Connection.CELL_2G] = 'Cell 2G connection';
        states[Connection.CELL_3G] = 'Cell 3G connection';
        states[Connection.CELL_4G] = 'Cell 4G connection';
        states[Connection.CELL] = 'Cell generic connection';
        states[Connection.NONE] = 'No network connection';
        this.connection = states[networkState];
      },
      createFile() {

        request({url: 'https://cdn.baxueyuan.online/xyms.apk', method: 'get', responseType: 'blob'})
            .then(res => res.data)
            .then(blob => {
              console.log(blob)
              this.msg = `下载文件大小：${blob.size}`;
              window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, (fs) => {
                console.log(fs)
                fs.root.getFile(
                    "Download/xyms.apk",
                    {create: true, exclusive: false},
                    (fileEntry) => {
                      fileEntry.createWriter((writer)=> {
                        writer.write(blob);
                        writer.onwritestart = ()=> {
                          console.log('开始写入')
                          this.msg = '开始写入'
                        }
                        writer.onwriteend = ()=> {
                          console.log('写入完成')
                          this.msg = '写入完成'
                        }
                        writer.onprogress = (progress)=> {
                          console.log(`写入中: ${progress}`);
                          this.msg = `写入中: ${progress}`
                        }

                      },(error)=> {console.log(error)})
                    },(error) => {
                      console.log(error);
                    })
              }, () => {
                console.log('加载文件系统失败')
              });
            })
      }
    }
  };
</script>
